<template>
  <div class="myInfo">
    <hmNavBar title="我的资料" path="/home/my"></hmNavBar>
    <div class="content">
      <myCell
        class="mt20"
        title="头像"
        :value="userInfo.avatar"
        type="img"
        @click="goEditInfo('avatar')"
      ></myCell>
      <myCell
        class="mt20"
        title="昵称"
        :value="userInfo.nickname"
        @click="goEditInfo('nickname')"
      ></myCell>
      <!-- 组件内部不定义是不能使用原生方法的,如果希望该组件能用,@原生事件.native就可以用了 
      组件传值
          父传子属性
          子传父(子触发父方法)
            1:子组件标签上绑定一个方法  @子组件方法名="父组件方法"
            2:子组件内触发父组件方法
                this.$emit("子组件方法名")
      -->
      <myCell
        title="性别"
        :value="genderObj[userInfo.gender]"
        @click="showGender = true"
      ></myCell>
      <myCell
        title="地区"
        :value="area.city_list[userInfo.area]"
        @click="showArea = true"
      ></myCell>
      <myCell
        title="个人简介"
        @click="goEditInfo('intro')"
        :value="userInfo.intro"
      ></myCell>
      <van-button block class="btn mt20" @click="exit"
        ><span class="red">退出登录</span></van-button
      >
    </div>
    <!-- 性别选择 -->
    <van-popup v-model="showGender" position="bottom" @closed="closedEvent">
      <van-picker
        title="性别选择"
        v-if="bol"
        show-toolbar
        :default-index="userInfo.gender"
        :columns="Object.values(genderObj)"
        @confirm="genderConfirm"
        @cancel="showGender = false"
      ></van-picker>
    </van-popup>
    <!-- 地区选择 -->
    <van-popup v-model="showArea" position="bottom">
      <van-area
        v-if="bol"
        title="城市选择"
        :area-list="area"
        :value="userInfo.area"
        :columns-num="2"
        @confirm="areaConfirm"
        @cancel="showArea = false"
      ></van-area>
    </van-popup>
  </div>
</template>
<script>
import myCell from './myCell'
import { mapState } from 'vuex'
import areaData from '@/assets/js/area.js'
import { removeLocal } from '@/utils/local.js'
import { auEdit } from '@/api/my'
export default {
  data () {
    return {
      area: areaData,

      // 对象的value转数据  Object.values(对象) ["保密",'男','女']
      // 对象的value转数据  Object.keys(对象) ["0",'1','2']
      // 对象的key与value转数据  Object.entries(对象) [['0',"保密"],['1',"男"],['2',"女"]]
      genderObj: {
        0: '保密',
        '1': '男',
        '2': '女'
      },
      bol: true,
      showGender: false,
      showArea: false
    }
  },
  watch: {
    showArea (_newVal) {
      if (_newVal === false) {
        this.bol = false
        this.$nextTick(() => {
          this.bol = true
        })
      }
    }
  },
  components: {
    myCell
  },
  computed: {
    ...mapState(['userInfo'])
  },
  mounted () {
    document.body.style.backgroundColor = '#f7f4f5'
  },
  beforeDestroy () {
    document.body.style.backgroundColor = '#ffffff'
  },
  methods: {
    // 退出功能
    /*
    this.$dialog.confirm({
      title:标题
      message:内容
      }).then(()=>{
        // 点击了确认
      }).catch(()=>{
        // 点击了取消
      })
    */
    exit () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '您确定退出该网站吗?'
        })
        .then(() => {
          // 点击了确认
          this.$toast.success('退出成功')
          removeLocal()
          this.$store.commit('setIsLogin', false)
          this.$router.push('/login')
        })
        .catch(() => {
          // 点击了取消
        })
    },
    // 性别选择确定
    async genderConfirm (value, index) {
      window.console.log(value, index)
      this.showGender = false
      // this.$toast.loading({
      //   duration: 0
      // })
      // const res = await auEdit({
      //   gender: index
      // })
      // this.$toast.success('修改成功')
      // this.$store.dispatch('refreshUserInfo')
      this.auEditInfo({ gender: index })
      // window.console.log(res)
    },
    // 城市选择
    async areaConfirm (value, index) {
      window.console.log(value, index)
      this.showArea = false
      // this.$toast.loading({
      //   duration: 0
      // })
      // const res = await auEdit({
      //   area: value[1].code
      // })
      // this.$toast.success('修改成功')
      // this.$store.dispatch('refreshUserInfo')
      this.auEditInfo({
        area: value[1].code
      })
    },
    // 修改用户信息
    async auEditInfo (data) {
      this.$toast.loading({
        duration: 0
      })
      const res = await auEdit(data)
      this.$toast.success('修改成功')
      this.$store.dispatch('refreshUserInfo')
    },
    // 刷新用户信息
    // async refreshUserInfo () {
    //   const res = await auInfo()
    //   // 存储用户信息到vuex
    //   this.$store.commit('setUserInfo', res.data.data)
    // }
    // 跳转进入编辑用户信息页面
    goEditInfo (str) {
      // 路由传值  1:传  this.$router.push("/xxx?参数名=值") 2:收  组件内 this.$route.query.参数名
      this.$router.push('/home/editInfo?type=' + str)
    },
    closedEvent () {
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    }
  }
}
</script>
<style lang="less" scoped>
.myInfo {
  .content {
    padding: 0 @p15;
    .mt20 {
      margin-top: 20px;
    }
    .btn {
      background-color: #fff;
      .red {
        color: red;
      }
    }
  }
}
</style>
